<template>
  <div id="earlyStageAchievementOpinion" v-loading.fullscreen="isLoading">
    <div class="MainBox">
      <div class="boxItem">
        <div class="boxItem_title">
          <span class="tit">变更基本信息</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">申请变更时间：</p>
                <div class="money">{{dataInfo.applyChangeDate}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">批复变更时间：</p>
                <div class="money">{{dataInfo.replyChangeDate}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="boxItem boxItem1">
        <div class="boxItem_title">
          <span class="tit">变更后审定项目建设信息</span>
        </div>

        <div class="boxItem_content" style="padding-top:35px;">
          <div class="boxItem_btn">
            <el-button @click="dialogVisible1=true">变更前后对比查看</el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">复垦点个数：</p>
                <div class="money" v-if="dataInfo.fkdgs!=null">{{dataInfo.fkdgs}}个</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">实施规模：</p>
                <div class="money">{{dataInfo.ssgm}}公顷</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计减少建设用地面积：</p>
                <div class="money">{{dataInfo.yjjsj}}公顷</div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计新增耕地面积：</p>
                <div class="money">{{dataInfo.yjzjg}}公顷</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="boxItem_content_row">
                <p class="pTitle">预计新增其他农用地面积：</p>
                <div class="money">{{dataInfo.yjzjq}}公顷</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="boxItem boxItem2">
        <div class="boxItem_title">
          <span class="tit">变更方案审定投资信息</span>
        </div>
        <div class="boxItem_content" style="padding-top:35px;">
          <div class="boxItem_btn">
            <el-button @click="dialogVisible2=true">变更前后对比查看</el-button>
          </div>
          <el-row :gutter="20">
            <el-col :span="2">
              <p class="freeTitle">工程施工费</p>
              <!-- <div class="money">{{dataInfo.gcsgf}}万元</div> -->
            </el-col>
            <el-col :span="22">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">拆除工程费：</p>
                    <p class="pContent">{{dataInfo.ccgcf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">土地平整工程费：</p>
                    <p class="pContent">{{dataInfo.tdpzgcf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">农田水利工程费：</p>
                    <p class="pContent">{{dataInfo.ntslgcf}}万元</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el_row">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">田间道路工程费：</p>
                    <p class="pContent">{{dataInfo.tjdlgcf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">其它施工费：</p>
                    <p class="pContent">{{dataInfo.qtsgf}}万元</p>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="2">
              <p class="freeTitle">其他费用</p>
              <!-- <div class="money">{{dataInfo.qtfy}}万元</div> -->
            </el-col>
            <el-col :span="22">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">前期工作费：</p>
                    <p class="pContent">{{dataInfo.qqgzf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">工程监理费：</p>
                    <p class="pContent">{{dataInfo.gcjlf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">设备购置费：</p>
                    <p class="pContent">{{dataInfo.sbgzf}}万元</p>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20" class="el_row">
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">竣工验收费：</p>
                    <p class="pContent">{{dataInfo.jgysf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">业主管理费：</p>
                    <p class="pContent">{{dataInfo.yzglf}}万元</p>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="boxItem_content_row">
                    <p class="pTitle">安全配套费：</p>
                    <p class="pContent">{{dataInfo.aqptf}}万元</p>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="freeTitle">不可预见费用</p>
            </el-col>
            <el-col :span="22">
              <p class="freeTitle">{{dataInfo.bkyjfy}}万元</p>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="boxItem_content_row marginBottom">
            <el-col :span="2">
              <p class="totalMoney">总投资</p>
            </el-col>
            <el-col :span="22">
              <p class="totalMoney">{{dataInfo.ztz}}万元</p>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="boxItem">
        <div class="boxItem_title">
          <!-- <span class="tit">变更后审查资料</span> -->

          <el-tabs v-model="flag" @tab-click="handleClick">
            <el-tab-pane label="查看变更后审查资料" name="1"></el-tab-pane>
            <el-tab-pane label="查看变更后CAD" name="2"></el-tab-pane>
          </el-tabs>
        </div>

        <div class="boxItem_content" style="padding-top:35px;">
          <div v-show="flag=='1'">
            <div class="boxItem_content_row">
              <div class="boxItem_content_row_item">
                <p>变更请示</p>
                <div class>
                  <el-button
                    type="primary"
                    @click="btnCheck(dataInfo.changeRequestFile.fileName,dataInfo.changeRequestFile.filePath)"
                  >查看</el-button>
                  <el-button @click="btn_download(dataInfo.changeRequestFile.id)">下载</el-button>
                </div>
              </div>
            </div>

            <div class="boxItem_content_row">
              <div class="boxItem_content_row_item">
                <p>变更批复</p>
                <div class>
                  <el-button
                    type="primary"
                    @click="btnCheck(dataInfo.changeApprovalFile.fileName,dataInfo.changeApprovalFile.filePath)"
                  >查看</el-button>
                  <el-button @click="btn_download(dataInfo.changeApprovalFile.id)">下载</el-button>
                </div>
              </div>
            </div>
            <div class="boxItem_content_row">
              <div class="boxItem_content_row_item">
                <p>变更方案</p>
                <div class>
                  <el-button
                    type="primary"
                    @click="btnCheck(dataInfo.changeSchemeFile.fileName,dataInfo.changeSchemeFile.filePath)"
                  >查看</el-button>
                  <el-button @click="btn_download(dataInfo.changeSchemeFile.id)">下载</el-button>
                </div>
              </div>
            </div>
            <!-- <div class="boxItem_content_row">
              <div class="boxItem_content_row_item">
                <p>变更后审定图CAD</p>
                <div class>
                  <el-button type="primary" @click="CADAfterDialog=true">查看</el-button>
                  <el-button @click="btn_download(urlCADAfter.id)">下载</el-button>
                  <el-button @click="btnCompareCAD">变更前后对比查看</el-button>
                </div>
              </div>
            </div>-->
            <div class="boxItem_content_row">
              <div class="boxItem_content_row_item">
                <p>变更资料</p>
                <div class>
                  <el-button
                    type="primary"
                    @click="btnCheck(dataInfo.changeDataFileId.fileName,dataInfo.changeDataFileId.filePath)"
                  >查看</el-button>
                  <el-button @click="btn_download(dataInfo.changeDataFileId.id)">下载</el-button>
                </div>
              </div>
            </div>
          </div>
          <div v-show="flag=='2'">
            <el-table
              :data="changeCAD"
              :header-cell-style="{background:'#f9f9f9',color:'#606266',fontSize:'12px'}"
            >
              <el-table-column label="变更前CAD名称" min-width="180" align="center">
                <template slot-scope="scope">{{scope.row.oldPlanningMap.fileName}}</template>
              </el-table-column>
              <el-table-column label="变更后CAD名称" min-width="180" align="center">
                <template slot-scope="scope">{{scope.row.newPlanningMap.fileName}}</template>
              </el-table-column>
              <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="btnSeeCAD(scope.row)">查看对比</el-button>
                  <el-button type="primary" size="small" @click="btn_download(scope.row.newPlanningMap.id)">下载变更后CAD</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin:20px;text-align:center">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="needInfo.page"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="needInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="变更前后对比查看" :visible.sync="dialogVisible1" width="50%">
      <div id="GSM_ELEMENT_AUTO_MADE_2">
        <table class="table-normal-view" style="width:100%;">
          <thead>
            <tr>
              <td class="tano-nowrap" width="40">&nbsp;</td>
              <td class="tano-center" width="50%">变更前</td>
              <td class="tano-center" width="50%">变更后</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="tano-nowrap">复垦点个数</td>
              <td class="tano-center">
                <span v-if="projectBeforeData.fkdgs!=null">{{projectBeforeData.fkdgs}}</span>
              </td>
              <td class="tano-center">
                <span v-if="dataInfo.fkdgs!=null">{{dataInfo.fkdgs}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">实施规模</td>
              <td class="tano-center">
                <span>{{projectBeforeData.ssgm}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.ssgm}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">预计减少建设用地面积</td>
              <td class="tano-center">
                <span>{{projectBeforeData.yjjsj}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.yjjsj}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">预计新增耕地面积</td>
              <td class="tano-center">
                <span>{{projectBeforeData.yjzjg}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.yjzjg}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">预计新增其他农用地面积</td>
              <td class="tano-center">
                <span>{{projectBeforeData.yjzjq}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.yjzjq}}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>

    <el-dialog title="变更前后对比查看" :visible.sync="dialogVisible2" width="50%">
      <div id>
        <table class="table-normal-view" style="width:100%;">
          <thead>
            <tr>
              <td class="tano-nowrap" width="40">&nbsp;</td>
              <td class="tano-center" width="50%">变更前</td>
              <td class="tano-center" width="50%">变更后</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="tano-nowrap tano-stress">总投资</td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.totalInvestment}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.ztz}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap tano-stress">工程施工费</td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.constructionCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.gcsgf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">拆除工程费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.demolitionCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.ccgcf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">土地平整工程费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.landLevelingCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.tdpzgcf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">农田水利工程费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.farmlandWaterConservancyCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.ntslgcf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">田间道路工程费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.fieldRoadCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.tjdlgcf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">其他施工费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.otherConstructingCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.qtsgf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap tano-stress">其他费用</td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.otherCost}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.qtfy}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">前期工作费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.qqgzf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.qqgzf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">工程监理费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.gcjlf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.gcjlf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">设备购置费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.sbgzf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.sbgzf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">竣工验收费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.jgysf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.jgysf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">业主管理费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.yzglf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.yzglf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap">
                <span class="tano-sub-txt">安全配套费</span>
              </td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.aqptf}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.aqptf}}</span>
              </td>
            </tr>
            <tr>
              <td class="tano-nowrap tano-stress">不可预见费用</td>
              <td class="tano-center">
                <span>{{touziBeforeInfo.unforeseeableExpenses}}</span>
              </td>
              <td class="tano-center">
                <span>{{dataInfo.bkyjfy}}</span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="checkDialog" width="60%">
      <iframe
        frameborder="0"
        name="showHere"
        width="100%"
        height="600"
        scrolling="auto"
        :src="$https+titleUrl"
      ></iframe>
    </el-dialog>

   
    <!-- CAD 对比-->
    <el-dialog title="CAD对比" :visible.sync="CompareCADDialog" width="60%">
      <el-row>
        <el-col :span="12">
          <div>变更后的CAD现状图</div>
          <iframe
            frameborder="0"
            name="showHere"
            width="100%"
            height="500"
            scrolling="auto"
            :src="'https://sharecad.org/cadframe/load?url='+$https+newCADpath"
          ></iframe>
        </el-col>
        <el-col :span="12" style="magin-left:20px">
          <div>变更前的CAD现状图</div>
          <iframe
            frameborder="0"
            name="showHere"
            width="100%"
            height="500"
            scrolling="auto"
            :src="'https://sharecad.org/cadframe/load?url='+$https+oldCADpath"
          ></iframe>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryByProject,
  queryEarlyProjectConstructingPlanCheckArea,
  queryEarlyProjectConstructingPlanInvestment,
  changeAfterCAD,
  changeBefourCAD,
  queryChangePlanningMapList
} from "@/api/projectImplementation";
import { truncate } from "fs";
export default {
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dataInfo: "",
      projectBeforeData: "", //变更前审定项目建设信息
      touziBeforeInfo: "", //变更前审定投资信息
      titleUrl: "", //查看
      title: "",
      checkDialog: false,
      urlCADAfter: [], //最新CAD
      CompareCADDialog: false,
      urlCADBefer: [],

      isLoading: false,
      flag: "1",

      changeCAD: [], //变更后CAD图信息
      needInfo: {
        page: 1,
        size: 5
      },
      total: 0,
      oldCADpath:'',
      newCADpath:''
    };
  },
  created() {
    this.getData();
    this.getProjectBeforeInfo(); //变更前审定项目建设信息
    this.getTouziBeforeInfo(); //查询变更前审定投资信息
    // this.btnAfterCAD();
    this.getChangeCAD();
  },
  methods: {
    btnSeeCAD(row){//查看CAD对比
      console.log(row,'rwo')
      this.CompareCADDialog=true
      this.oldCADpath=row.oldPlanningMap.filePath
      this.newCADpath=row.newPlanningMap.filePath
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.needInfo.size=val
      this.getChangeCAD()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.needInfo.page=val
      this.getChangeCAD()
    },
    getChangeCAD() {
      //查询变更前后的CAD

      let obj = {
        page: this.needInfo.page,
        size: this.needInfo.size,
        projectId: localStorage.getItem("projectId")
      };
      queryChangePlanningMapList(obj).then(res => {
        console.log(res, "re");
        this.changeCAD = res.data.rows;
        this.total = res.data.total;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    btn_download(id) {
      //下载文件
      console.log(id, "id");
      var a = document.createElement("a");
      a.setAttribute("href", this.$https + "/pc/file/download?id=" + id);
      a.click();
    },
    
    btnCheck(title, path) {
      //查看文件
      console.log(this.$https + path);
      this.checkDialog = true;
      this.titleUrl = path;
      this.title = title;
    },
    getTouziBeforeInfo() {
      //查询变更前审定投资信息
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      queryEarlyProjectConstructingPlanInvestment(obj).then(res => {
        console.log(res, "res1");
        this.touziBeforeInfo = res.data;
      });
    },
    getProjectBeforeInfo() {
      //查询变更前审定项目建设信息
      let obj = {
        projectId:localStorage.getItem("projectId")
      };
      queryEarlyProjectConstructingPlanCheckArea(obj).then(res => {
        console.log(res, "res2");
        if (res.data != null) {
          this.projectBeforeData = res.data;
        }
      });
    },
    getData() {
      //查询项目规划设计与实施方案编制变更成果
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      this.isLoading = true;
      queryByProject(obj)
        .then(res => {
          console.log(res, "res3");
          this.isLoading = false;
          this.dataInfo = res.data;
        })
        .catch(error => {
          this.isLoading = false;
        });
    }
  }
};
</script>
<style scoped>
.boxItem_btn {
  margin-bottom: 20px;
}
.btn {
  padding: 30px;
}

.projectMoney {
  padding-left: 150px;
}
#earlyStageAchievementOpinion {
  padding: 30px;
  box-sizing: border-box;
}
#earlyStageAchievementOpinion .boxItem {
  width: 100%;
  background-color: #fff;
}
#earlyStageAchievementOpinion .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#earlyStageAchievementOpinion .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#earlyStageAchievementOpinion .boxItem_content_row {
  display: flex;
  align-items: center;
}
#earlyStageAchievementOpinion .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#earlyStageAchievementOpinion .boxItem_content_row_item:nth-child(2n-1) {
  margin-right: 300px;
}
#earlyStageAchievementOpinion .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
  width: 165px;
}
#earlyStageAchievementOpinion .boxItem1 .boxItem_content_row_item p {
  width: 180px;
}
#earlyStageAchievementOpinion .boxItem_content_row_item_noFlex {
  display: flex;
  width: 100%;
}
#earlyStageAchievementOpinion .boxItem_content_row_item_noFlex p {
  font-size: 14px;
  line-height: 36px;
  width: 140px;
}
#earlyStageAchievementOpinion .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#earlyStageAchievementOpinion .boxItem_content_row_item p:last-child {
  color: #666;
}
#earlyStageAchievementOpinion .uploadDownLoadBox_item {
  margin: 20px 0;
}
#earlyStageAchievementOpinion .uploadDownLoadBox_item p {
  width: 140px;
}
#earlyStageAchievementOpinion .button_box {
  margin-top: 54px;
}

#earlyStageAchievementOpinion .boxItem_content_row_item_input {
  position: relative;
}
#earlyStageAchievementOpinion .boxItem_content_row_item_input .el-input__inner {
  padding-right: 50px;
}
#earlyStageAchievementOpinion .boxItem_content_row_item_input span {
  position: absolute;
  right: 10px;
  top: 3px;
  height: 36px;
  line-height: 36px;
  z-index: 1;
  color: #999;
}

.table-normal-view {
  border: 1px solid #cfcfcf;
  border-collapse: collapse;
}
.table-detail-view,
.table-edit-view {
  width: 100%;
  border: 0 none;
}
.table-edit-view .col-tit,
.table-edit-view .col-content {
  padding-top: 25px;
}
.table-detail-view .col-content,
.table-edit-view .col-content {
  font-size: 13px;
  color: #606266;
}
.table-detail-view .col-tit,
.table-edit-view .col-tit {
  font-size: 13px;
  color: #444;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  padding-right: 15px;
}

.table-edit-view tr td {
  padding: 15px 5px 10px 5px;
}
.table-detail-view tr td,
.table-edit-view tr td {
  padding: 15px 5px 10px 5px;
  vertical-align: top;
}
.table-detail-view tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
.table-normal-view tr,
.table-normal-view td,
.table-normal-view th {
  border: 1px solid #cfcfcf;
  padding: 10px 10px;
}
.table-normal-view tr td {
  display: table-cell;
  vertical-align: inherit;
}
.table-normal-view .tano-center {
  text-align: center;
}
.table-normal-view td {
  font-size: 14px;
  color: #444;
  min-height: 30px;
}
.table-normal-view .tano-nowrap {
  white-space: nowrap;
}
.table-normal-view .tano-stress {
  font-weight: bold;
}
.table-normal-view .tano-sub-txt {
  padding-left: 40px;
  display: inline-block;
  overflow: hidden;
}
.boxItem_content_row_item p:first-child {
  text-align: right;
  margin-right: 10px;
}
.boxItem_content_row .money {
  font-size: 13px;
  color: #606266;
}
.boxItem_content_row .pTitle {
  font-size: 13px;
  color: #606266;
  font-weight: bold;
}
.boxItem_content_row .pContent {
  font-size: 13px;
  color: #606266;
}
.freeTitle {
  font-size: 15px;
  font-weight: bold;
  color: #666;
}
.boxItem_content_row .totalMoney {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.boxItem_title /deep/ .el-tabs__item {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.boxItem_title /deep/ .el-tabs__item.is-active {
  color: #409eff;
}
</style>
 